<template>
	<div class="commodity-list">
		<div class="topBox">
			<div class="topBoxSon1">
				<p>书城管理 — <b>商品列表</b></p>
				<button class=" el-icon-refresh-right" @click="refresh()"></button>
			</div>
		</div>
		<el-button @click="add(0)" style="display: flex;color: white;background-color: #009688;margin: 20px 0 20px 5%;">添加商品</el-button>
		<el-table 
		style="width: 90%;margin: 0 auto; margin-top: 10px;" 
		:data="tableData" 
		:header-cell-style="{background:'#f2f2f2',color:'#606266'}" 
		border>
			<el-table-column label="名称" prop="name" >
			</el-table-column>
			<el-table-column label="编号" prop="sn">
			</el-table-column>
			<el-table-column label="作者" prop="author">
			</el-table-column>
			<el-table-column label="厂家" prop="maker">
			</el-table-column>
			<el-table-column label="日期" prop="tmake">
				<template slot-scope="scope" >
					{{scope.row.tmake|run}}
				</template>
			</el-table-column>
			<el-table-column label="库存" prop="stock">
			</el-table-column>
			<el-table-column label="图片" prop="pic">
				<template slot-scope="scope">
					{{scope.row.pic}}
					<el-image style="width: 5vh;height: 5vh;"
							  :src="`http://127.0.0.1/api/public/showimg/${scope.row.pic}`">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="操作" prop="gt">
				<template slot-scope="scope">
					<el-button @click="update(scope.row.id)" class="el-icon-edit" style="background-color: #1e9fff;color: white;border: none;">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page.sync="start"
		      :page-size="num"
		      layout="prev, pager, next, jumper"
		      :total="total">
		</el-pagination>	
		<div class="bottomBox">
			<p>后台管理</p>
		</div>
	</div>
</template>

<script>
	export default {
		name :'CommodityList',
		data(){
			return{
				num:5,
				start:1,
				total:0,
				typeid:0,
				tableData:[]
			}
		},
		filters:{
			run(value){
				let one = new Date(value);
				let year = one.getFullYear()+"-"+(one.getMonth()+1)+"-"+one.getDate();
				return year;
			}
		},
		methods:{
			 handleSizeChange(val) {
			        console.log(`每页 ${val} 条`);
					this.findAll()
			      },
			      handleCurrentChange(val) {
			        console.log(`当前页: ${val}`);
					this.findAll();
			      },
			    
			findAll(){
				this.$get("api/public/findPageBook/"+this.start+"/"+this.num+"/"+this.typeid
				).then((resp)=>{
					this.tableData = resp.data.data.books;
					console.log(this.tableData);
					this.total =resp.data.data.total;	
				})
			},
			add(id){
				this.$router.push({
					path:'/backendManage/addUpateCommodity',
					query:{id:id}
				})
			},
			update(id){
				this.$router.push({
					path:'/backendManage/addUpateCommodity',
					query:{id:id}
				})
			},
			move(n) {
			   this.num += n;
			   if (this.num<1) { this.num=1; return; }
			   if (this.num>this.total) { this.num=this.total; return; }
			   this.findAll();  
			},
			refresh(){
				this.$router.go(0);
			}
		},
		mounted(){
			this.findAll();
		}
	}
</script>

<style scoped>
	.commodity-list{
		width: 100%;
		height: 100%;
	}
	.topBox{
		width: 90%;
		margin: 0 auto;
		display: flex;
	}
	.topBoxSon1{
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #aaa6a6;
	}
	.topBoxSon1 p{
		line-height: 60px;
		font-size: 20px;
		color: #aaa6a6;
	}
	.topBoxSon1 p b{
		font-weight: 400;
		line-height: 60px;
		font-size: 20px;
		color: #818181;
	}
	.topBoxSon1 button{
		display: flex;
		background-color: #009688;
		color: white;
		font-size: 20px;
		border: none;
		border-radius: 5px;
		height: 40px;
		width: 55px;
		margin-top: 10px;
		align-items: center;
		text-align: center;
		padding-left: 15px;
	}
	.bottomBox{
		display: flex;
		width: 100%;
		height: 50px;
		background-color: #D3D3D3;
		display: flex;
		position: absolute;
		bottom: 0;
	}
	.bottomBox.p{
		margin: 20px auto;
	}
	.col4{
		background-color: #393d49;
	}
</style>